<template>
	<view class="menu-list">
		<view class="list-item" v-for="(item,index) in list" :key="index" @click="linkPage(item)">
			<view class="item-icon">
				<i class="t-icon" :class="item.icon"></i>
			</view>
			<view class="item-text u-line-1">{{item.name}}</view>
			<u-icon name="arrow-right" color="#98bfeb" size="14"></u-icon>
		</view>
		<!--个人课表标识获取-->
		<u-popup :show="show" mode="center" overlayOpacity="0.2" :round="10" @close="close">
			<view class="popup-code">
				<view class="popup-title">
					个人课表标识
				</view>
				<view class="popup-text">
					{{userCode}}
				</view>
				<view class="popup-cro">
					<p>
						<h2>如何绑定课表?</h2>
					<p>
					<p>1：将你的"课表标识"发送给那个Ta</p>
					<p>2：点击头像进入个人信息编辑页面</p>
					<p>3：讲Ta的课表标识填入"绑定课表"中</p>
					<p>4：点击保存就可以看到Ta的课表啦</p>
					<p>(需要被绑定的那方同步课表先喔)</p>
				</view>
				<view class="popup-button">
					<u-button type="primary" text="复制并关闭" @click="btnClose"></u-button>
				</view>
			</view>
		</u-popup>
		<!--客服窗口-->
		<u-popup :show="contact" mode="center" overlayOpacity="0.2" closeable="true" :round="10" @close="contactClose">
			<view class="popup">
				<view class="popup-contact">
					<!-- <i class="t-icon t-icon-lanqiu"></i> -->
					<image class="i" src="https://yj.xiesinder.cn/prophet/logo.png" mode="scaleToFill" lazy-load="true"></image>
				</view>
				<!-- <view class="group">
					<image class="group_code" @click="previewImage(group_code)" :src="group_code" mode="scaleToFill" lazy-load="true"></image>
				</view> -->
				<view class="popup-button">
					<u-button type="primary" open-type="contact" text="立即联系"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const LIST = [
		// {
		// 	index: 0,
		// 	name: 'NBA赛事分析',
		// 	icon: 't-icon t-icon-lanqiu',
		// 	src: '' // 跳转地址
		// },
		{
			index: 1,
			name: '获取课表标识',
			icon: 't-icon--school',
			src: ''
		},
		{
			index: 2,
			name: '绑定教务系统',
			icon: 't-icon--school-',
			src: '/page_my/pages/bind-jwgl'
		},
		// {
		// 	index: 3,
		// 	name: '我发布的"寻物启事"',
		// 	icon: 't-icon-shiwuzhaoling',
		// 	src: ''
		// },
		{
			index: 4,
			name: '意见反馈',
			icon: 't-icon-xianzhigongxiang',
			src: ''
		},
		{
			index: 5,
			name: '联系客服',
			icon: 't-icon-drxx10',
			src: ''
		},
		{
			index: 6,
			name: '了解我们',
			icon: 't-icon--bulb',
			src: '/page_my/pages/about'
		}
	]
	import { getUserCode } from '@/plugins/api/userApi.js'
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				group_code: 'https://yj.xiesinder.cn/prophet/group_code.jpg',
				list: LIST,
				show: false,
				userCode: '', // 用户标识
				contact: false // 控制客服弹窗
			}
		},
		computed: {
			...mapState('user', ['openId'])
		},
		methods: {
			// 点击图片预览
			previewImage(url) {
				uni.previewImage({
					current: url,
					urls: [url]
				})
			},
			// 前往指定页面
			linkPage(item) {
				switch (item.index) {
					case 0:
						this.toMiniNBA()
						break;
					case 1:
						// 获取我的个人课表标识
						this.getUserCodeByOpenId()
						break;
					case 5:
						// 联系客服
						this.contact = true
						break;
					default:
						if (item.src == '') {
							uni.$u.toast('敬请期待')
						} else {
							// 默认跳转页面
							this.$navTo(item.src)
						}	
				}
			},
			// 打开并获取我的个人标识
			async getUserCodeByOpenId() {
				this.show = true
				await getUserCode({openId: this.openId}).then(res => {
					this.userCode = res.data.data
				}).catch(err => {
					console.log(err)
				})
			},
			// 复制个人标识并关闭
			close() {
				// 复制到粘贴板
				this.show = false
			},
			// 按钮复制并关闭
			btnClose() {
				this.show = false
				uni.setClipboardData({
					data: this.userCode,
					success(res) {
						uni.$u.toast('已复制个人标识')
					}
				})
			},
			// 打开NBA小程序
			toMiniNBA() {
				// 打开其他的小程序
				uni.navigateToMiniProgram({
					appId: 'wx1a3f9b9d3a5b3768',
					path: 'pages/index/index',
					envVersion: 'release',
					success(res) {
						console.log('调起球赛数据小程序成功')
					},
					fail(err) {
						console.log('调起失败', err)
						uni.$u.toast('服务暂停')
					}
				})
			},
			// 关闭客服弹窗
			contactClose() {
				this.contact = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.menu-list {
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 57rpx 0rpx rgba(169, 188, 224, 0.26);
		border-radius: 20rpx;
		
		.popup-code {
			width: 450rpx;
			height: 500rpx;
			
			.popup-title {
				padding-top: 30rpx;
				color: #E9AF3E;
				width: 100%;
				text-align: center;
				font-size: 26rpx;
			}
			
			.popup-text {
				padding-top: 45rpx;
				font-size: 45rpx;
				color: #EA0E29;
				width: 100%;
				text-align: center;
			}
			
			.popup-cro {
				padding-top: 15rpx;
				color: #7ee5ee;
				width: 100%;
				text-align: left;
				text-indent: 1em;
				font-size: 24rpx;
			}
			
			.popup-button {
				padding-top: 30rpx;
				width: 350rpx;
				margin-left: 50rpx;
			}
		}
		
		
		.popup {
			width: 450rpx;
			height: 250rpx;
			
			// 客服icon
			.popup-contact {
				margin-top: 50rpx;
				margin-left: 185rpx;
				width: 80rpx;
				height: 80rpx;
				
				.i {
					width: 80rpx;
					height: 80rpx;
				}
			}
			
			// 群聊图片
			// .group {
			// 	margin-top: 30rpx;
			// 	margin-left: 50rpx;
			// 	width: 350rpx;
			// 	height: 350rpx;
				
			// 	.group_code {
			// 		width: 350rpx;
			// 		height: 350rpx;
			// 	}
			// }
			
			.popup-button {
				margin-top: 0rpx;
				width: 350rpx;
				margin-left: 50rpx;
			}
		}

		.list-item {
			display: flex;
			align-items: center;
			padding: 5rpx 31rpx 0 32rpx;
			height: 90rpx;
			border-bottom: 1rpx solid #F1F1F1;

			&:last-child {
				border-bottom: none;
			}

			.item-icon {
				display: flex;
				align-items: center;
				flex-shrink: 0;
				width: 42rpx;
				height: 46rpx;

				i {
					width: 42rpx;
					height: 42rpx;
				}
			}

			.item-text {
				flex-grow: 1;
				overflow: hidden;
				padding: 0 0 0 20rpx;
				font-size: 28rpx;
				color: #000000;
				letter-spacing: 2rpx;
				text-indent: 2rpx;
			}
		}
	}
</style>